<template>
	<view class="set-safe-area-layout">
		<view class="map-body" v-show="!showPop">
			<web-view :fullscreen="false" :webview-styles="{width:'100%', height:'100%'}"
				:style="{width:'100%', height:'100%'}" ref="webview" src='../../static/html/safearea.html'
				@message="handleMessage"></web-view>
		</view>
		<view class="bottom">
			<view class="address_row">
				<view class="address_icon">
					<image src="../../static/function/location_place.png" mode="aspectFill"></image>
				</view>
				<view class="address">
					{{addressName}}
				</view>
			</view>
			<view class="devide_line"></view>
			<view class="fence—range">
				<view class="fence_title">
					{{$t('setSafeAreaMap.fenceRadiusTitle')}}
				</view>
				<view class="fence_radius">
					<text style="color: #333;font-size: 26rpx;">{{$t('setSafeAreaMap.fenceRadius')}}</text>
					<text style="color: #53786C;font-size: 26rpx;">{{radius}}m</text>
				</view>
			</view>
			<view class="slide—bg">
				<view class="min">
					0m
				</view>
				<view class="slide">
					<slider step="1" style="height: 10rpx;width: 500rpx;" :value="radius" block-size=16
						activeColor="#53786C" min="0" max="1000" @changing="slideChange" @change="slideChange" />
				</view>
				<view class="max">
					1000m
				</view>
			</view>
			<view class="devide_line"></view>

			<view class="area-row">
				<view class="area-name">
					{{$t('setSafeAreaMap.areaName')}}
				</view>
				<view class="area-num" @click="showPopView">
					{{fenceName}}
				</view>
			</view>
			<view class="save" @click="toSaveArea">
					{{$t('setSafeAreaMap.save')}}
			</view>
		</view>

		<view class="input_pop" v-if="showPop">
			<view class="inputBg">
				<view class="input-name">
					<input @blur="onKeyboardHide" class="name" focus placeholder-style="color:#999" :placeholder="$t('setSafeAreaMap.fenceTile')"
						@input="changeNameContent" confirm-type="done" @confirm="onConfirm" />


					<view class="bottom_btn">
						<view class="confirm_name" @click="cancelName">
							{{$t('setSafeAreaMap.cancel')}}
						</view>
						<view class="confirm_name" @click="confirmName">
								{{$t('setSafeAreaMap.sure')}}
						</view>

					</view>

				</view>
			</view>
		</view>



	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from "vue";
	import {
		getCurrentInstance
	} from 'vue';
	import {
		apiAddDeviceFence
	} from "../../api/device_api";
	import { i18nTool } from '../../utils/i18en';
import { getImei } from "../../utils/user_tools";
	const radius = ref(0);
	const addressName = ref(null);
	let imei = getImei();
	const showPop = ref(false);
	const fenceName = ref(i18nTool('setSafeAreaMap.hintInput'));
	const inputedName = ref(null);
	const dataItem = ref(null);
	var param = {
		imei: imei,
	};
	const slideChange = (e) => {
		radius.value = e.detail.value;
		let data = {
			'type': '1',
			'radius': radius.value
		}
		postMessage(data);
		param.radius = radius.value;
		
	}
	const changeNameContent = (e) => {
		inputedName.value = e.detail.value;
	}
	const onKeyboardShow = () => {
		showPop.value = true;
		// 在这里处理键盘弹出的逻辑
	}
	const onConfirm = (event) => {
		showPop.value = false;
		fenceName.value = inputedName.value;
		param.name = fenceName.value;
		console.log('键盘确认', event.detail.value);
	}

	// const onKeyboardHide = () => {
	// 	showPop.value = false;
	// 	console.log('键盘消失');
	// 	// 在这里处理键盘消失的逻辑
	// }
	const showPopView = () => {
		showPop.value = true;
	}
	const confirmName = () => {
		showPop.value = false;
		if (inputedName.value) {
			fenceName.value = inputedName.value;
			param.name = fenceName.value;
		}

	}
	const cancelName = () => {
		showPop.value = false;
	}

	const postMessage = (msg) => {
		// #ifdef APP-PLUS
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		var currentWebview = page.$getAppWebview();
		let wv = currentWebview.children()[0];
		wv.evalJS(`getVueMessage(${JSON.stringify(msg)})`);
		// #endif
	}
	//接收处理H5传来的信息 
	const handleMessage = (evt) => {

		let recMsg = evt.detail.data[0];
		console.log('接收到H5的消息==', JSON.stringify(recMsg));
		console.log(recMsg.content.addressName);
		addressName.value = recMsg.content.addressName;
		param.lat = recMsg.content.addressPosition.lat;
		param.lng = recMsg.content.addressPosition.lng;
		param.addrName = addressName.value
	}
	onShow(() => {

	})
	onLoad((e) => {
		
		uni.setNavigationBarTitle({
			title:i18nTool("setSafeAreaMap.navTitle")
		})
		
		let {
			item
		} = e;
		
		if (item) {
			dataItem.value = JSON.parse(item);
			addressName.value = dataItem.value.addrName;
			fenceName.value = dataItem.value.name;
			radius.value = dataItem.value.radius;

			let msg = {
				'type': '2',
				'content': {
					radius: dataItem.value.radius,
					position: {
						lat: dataItem.value.lat,
						lng: dataItem.value.lng,
					}
				}
			}
			setTimeout(() => {
				postMessage(msg);
			}, 3000)

			param = {
				name: fenceName.value,
				addrName: addressName.value,
				radius: radius.value,
				imei:imei
			};
		}else{
			let msg = {
				'type': '3',
			}
			setTimeout(() => {
				postMessage(msg);
			}, 3000)
		}
		// uni.onKeyboardHeightChange(res => {
		// 	if (res.height === 0) {
		// 		showPop.value = false;
		// 	}
		// });

		// #ifdef APP-PLUS
		let height = 0;
		uni.getSystemInfo({
			success: sysinfo => {
				height = sysinfo.screenHeight
			},
		});
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		var currentWebview = page.$getAppWebview();

		setTimeout(function() {
			const wv = currentWebview.children()[0];
			wv.setStyle({
				top: 0,
				height: height - 300,
			});
		}, 2000);
		// #endif
	})



	const toSaveArea = async () => {
		if (!param.radius) {
			uni.showToast({
				title: i18nTool('setSafeAreaMap.radiusHint'),
				icon: "none"
			})
			return;
		}

		if (!param.name) {
			uni.showToast({
				title: i18nTool('setSafeAreaMap.fenceNameHint'),
				icon: "none"
			})
			return;
		}

		let res = await apiAddDeviceFence(param);
		uni.navigateBack();

	}
</script>

	

<style lang="scss" scoped>
	.set-safe-area-layout {
		.map-body web-view {
			overflow: hidden;
		}

		.bottom {
			background-color: white;
			height: 500rpx;
			width: 100vw;
			left: 0;
			right: 0;
			position: fixed;
			bottom: 0;

			.address_row {
				margin: 40rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: start;

				.address_icon {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.address {
					padding-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}

			.devide_line {
				margin: 20rpx 20rpx;
				background-color: #f9f9f9;
				height: 2rpx;

			}

			.fence—range {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 40rpx;

				.fence_title {
					color: #333;
					font-size: 26rpx;
				}

				.fence_radius {}
			}


			.slide—bg {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				padding: 10rpx 40rpx;

				.min {
					font-size: 26rpx;
					color: #333;
				}

				.max {
					font-size: 26rpx;
					color: #333;
				}

			}

			.area-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 40rpx;
				color: #333;
				font-size: 26rpx;
			}

			.save {
				margin: 40rpx 60rpx;
				height: 80rpx;
				color: #fff;
				background-color: #53786C;
				border-radius: 40rpx;
				@include flex-box-set(center);
			}

		}

		.input_pop {
			bottom: 0;
			left: 0;
			right: 0;
			position: fixed;
			top: 0;
			background-color: rgb(0, 0, 0, 0.6);
			padding-top: 200rpx;
			z-index: 10000000000;

			.inputBg {
				margin: 100rpx 60rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding-top: 100rpx;
				height: 400rpx;

				.input-name {

					margin-top: 60rpx;
					margin-left: 40rpx;
					margin-right: 40rpx;
					border: 2rpx solid #BDBDBD;
					border-radius: 10rpx;
					height: 80rpx;

					.name {
						height: 100%;
						padding-left: 30rpx;
						padding-right: 15rpx;
						color: #333;
						font-size: 30rpx;
					}
				}

				.bottom_btn {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 100rpx;

					.confirm_name {

						width: 200rpx;
						height: 80rpx;
						color: #fff;
						font-size: 26rpx;
						background-color: #53786C;
						border-radius: 40rpx;
						@include flex-box-set(center);

					}
				}

			}
		}
	}
</style>